<template>
  <div class="container">
    <van-nav-bar left-text="分类管理" left-arrow @click-left="onClickLeft" />
    <div class="tab_container">
      <div class="tab_container_inside">
        <div class="not" :class="{change:switchTabs ==0}" @click="changestatus('0')">
          商品管理
          <div :class="{line:switchTabs ==0}"></div>
        </div>
        <div class="not" :class="{change:switchTabs ==1}" @click="changestatus('1')">
          商品分类
          <div :class="{line:switchTabs ==1}"></div>
        </div>
      </div>
    </div>
    <!-- 商品管理 -->
    <div v-if="switchTabs == 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="outer">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-for="(item,index) in list" :key="index" class="content">
            <div style="width:20%">
              <img :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" alt style="width:56px;height:56px;border-radius:5px" />
            </div>
            <div style="width:80%">
              <div style="font-size:15px">{{item.title}}</div>
              <div style="font-size:12px;color:#787D85;display:flex;justify-content:space-between">
                <div style="margin-top:3px">商品编码：{{item.fetch_code}}</div>
                <img
                  src="../../../static/appimg/class.png"
                  alt
                  style="width:25px;height:25px"
                  @click="chooseClick(item)"
                />
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 分类管理 -->
    <div v-if="switchTabs == 1">
      <div class="field">
        <div class="assort" v-for="(item,index) in list1" :key="index">
          <div style="width:60%;height:51px;display:flex;align-items:center;">
            <div style="display:flex;align-items:center;font-size:17px;width:60%">{{item.name}}</div>
            <div style="color:#787D85;font-size:12px;">
              商品数量:
              <span style="margin-left:5px">{{item.page_num}}</span>
            </div>
          </div>
          <div class="outward">
            <div class="more" @click="moreClick(item)">更多</div>
            <div @click="openLink(item)">查看</div>
          </div>
        </div>
      </div>
      <div class="additemize" @click="addItemize">增加分类</div>
    </div>
    <!-- 添加商品到分类 -->
    <van-popup
      v-model="addItemizeModal"
      position="bottom"
      :style="{ height: '55%' ,borderRadius:'20px 20px 0 0',padding:'15px'}"
    >
      <div class="choose">选择添加到的分类</div>
      <div class="radio" v-for="(item,index) in checkedList" :key="index">
        <van-checkbox-group v-model="selectedCategoryId">
          <van-checkbox :name="item.id">
           <span style="font-size:16px">{{item.name}}</span>
          </van-checkbox>
        </van-checkbox-group>
      </div>
      <div @click="radioClick" class="hold">确定</div>
    </van-popup>
    <!-- 更多 -->
    <van-popup
      v-model="editModal"
      position="bottom"
      :style="{ height: '20%' ,borderRadius:'20px 20px 0 0',padding:'15px'}"
    >
      <!-- <div class="handle" style="border-bottom: 1px solid #F7F8F9;">编辑</div> -->
      <div class="handle" @click="deleClick">删除</div>
    </van-popup>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import Sortable from "sortablejs";
export default {
  components: {
    draggable,
    Sortable
  },
  data() {
    return {
      switchTabs: 0, //0商品管理  1分类管理
      search: {
        page: 1,
        page_Size: 20
      },
      total: 1,
      list: [],
      list1: [],
      search1: {
        is_all: "1"
      },
      loading: false,
      finished: false,
      refreshing: false,
      addItemizeModal: false,
      editModal: false,
      rowShangpinId: "",
      checkedList: [],
      checkedAlarmObjIdArr: [],
      selectedItem: "",
      selectedRow: null,
      selectedCategoryId: []
    };
  },
  created() {
    // 商品管理列表
    this.getList();
    // 分类管理列表
    this.getClassifyList();
  },
  mounted() {},
  methods: {
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.search = {
        page: 1,
        page_Size: 20
      };
      this.getList();
    },
    onLoad() {
      this.search.page++;
      this.getList();
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    addItemize() {
      this.$router.push("/shangpinguanli/addClassify");
    },
    openLink(row) {
      this.$router.push({
        path: "/shangpinguanli/seeclassifyShop",
        query: {
          category_id: row.id,
          site_id: row.site_id,
          name: row.name
        }
      });
    },
    changestatus(val) {
      this.switchTabs = val;
    },
    moreClick(row) {
      this.editModal = true;
      this.selectedRow = row;
    },
    // 删除分类
    deleClick() {
      const row = this.selectedRow;
      axios.post(`/own/category/delete`, { id: row.id }).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("删除成功");
          this.getClassifyList();
          this.editModal = false;
        } else {
          this.$message.error(response.data.msg.info);
          this.getClassifyList();
        }
      });
    },
    // 商品管理列表
    getList() {
      axios
        .get("/own/category/page/list", { params: this.search })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list =
              this.search.page == 1
                ? response.data.data.data
                : this.list.concat(response.data.data.data);
            this.total = response.data.data.total;
            this.loading = false;
            this.refreshing = false;
            if (this.list.length >= this.total) {
              this.finished = true;
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    // 分类管理列表
    getClassifyList() {
      axios
        .get("/own/category/list", { params: this.search1 })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list1 = response.data.data;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    chooseClick(row) {
      axios
        .get("/own/category/list", { params: { not_have_public: 1 } })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.checkedList = response.data.data.data;
            this.addItemizeModal = true;
            this.rowShangpinId = row.id;
            this.selectedRow = row;
            this.selectedCategoryId = row.category
              .filter(i => !!this.checkedList.find(j => j.id == i.id))
              .map(i => i.id);
            console.log("this.selectedCategoryId2", this.selectedCategoryId);
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    radioClick() {
      axios
        .post(`/own/category/link/update`, {
          page_id: this.rowShangpinId.toString(),
          category_id: this.selectedCategoryId.join(",")
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("选择分类成功");
            this.addItemizeModal = false;
            this.onRefresh();
          } else {
            this.$message.error(response.data.msg.info);
            this.onRefresh();
          }
        });
    }
  }
};
</script>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  background: #f6f8fb;
}
/deep/ .van-nav-bar__text {
  color: black;
}
/deep/ .van-nav-bar .van-icon {
  color: black;
}
.tab_container {
  width: 100%;
  height: 51px;
  background: white;

  .tab_container_inside {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    height: 51px;
    align-items: center;
    color: #787d85;
    width: 50%;
    padding: 0 20px;
  }
  .line {
    background-color: #005aff;
    width: 18px;
    height: 3px;
    margin: 0 auto;
    position: absolute;
    left: 17px;
    bottom: -16px;
    border-radius: 5px;
  }
  .not {
    color: #020c1d;
    font-size: 14px;
    cursor: pointer;
    position: relative;
  }
  .change {
    color: #005aff;
    font-size: 14px;
  }
}
.content {
  width: 100%;
  height: 87.5px;
  background: white;
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  padding: 0 15px;
  align-items: center;
}
.outer {
  width: 100%;
  padding: 0 15px;
  padding-bottom: 30px;
  height: calc(100vh - 97px);
  overflow: auto;
}
.field {
  width: 100%;
  padding: 0 15px;
  padding-bottom: 30px;
  padding-top: 15px;
  height: calc(100vh - 140px);
  overflow: auto;
}
.assort {
  height: 51px;
  width: 100%;
  background: white;
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.additemize {
  width: calc(100% - 30px);
  height: 46px;
  background: #005aff;
  font-size: 16px;
  color: white;
  text-align: center;
  line-height: 46px;
  border-radius: 15px;
  position: absolute;
  bottom: 15px;
  left: 15px;
}
.choose {
  text-align: center;
  font-size: 17px;
  color: #020c1d;
  margin-bottom: 20px;
}
.radio {
  width: 100%;
  background: #f6f8fb;
  height: 60px;
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.outward {
  width: 40%;
  height: 51px;
  color: #005aff;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .more {
    width: 49px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background: #e8f2ff;
    border-radius: 15px;
    margin-right: 20px;
  }
}
.handle {
  width: 100%;
  height: 56px;
  text-align: center;
  line-height: 56px;
  font-size: 17px;
}
.hold {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: #005aff;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  margin-top: 40px;
}
</style>